<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>亿信聊天室 个人中心</title>
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/menber.css">
    <script src="../js/jquery-1.10.1.min.js"></script>
    <script src="//cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
</head>
<body>
<header>
    <div class="top">
        <div class="container">
            <!--未登录状态-->
            <div class="login" style="display: none">
                <div class="top-reg">
                    <div class="denglu fl">
                        <a href="javascript:;"><span><img src="../images/icon_wdzh.png" alt="">登陆</span></a>
                    </div>
                    <div class="fl line"></div>
                    <div class="zhuce fl">
                        <a href="javascript:;"><span><img src="../images/icon_yhgl.png" alt="">注册</span></a>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="top-tips">
                    <span>游客，您好！</span>
                    您是第666位访问网站的人
                </div>
            </div>
            <!-- 登陆状态 -->
            <div class="login success">
                <div class="top-reg">
                    <div class="qiandao fl">
                        <a href="javascript:;"><span><img src="../images/icon_rl.png" alt="">签到</span></a>
                    </div>
                    <div class="fl line"></div>
                    <div class="tongzhi fl">
                        <a href="message.html"><span><img src="../images/icon_tz.png" alt="">通知</span></a>
                    </div>
                    <div class="fl line"></div>
                    <div class="tongzhi fl">
                        <a href="menber.html"><span><img src="../images/icon_grzx.png" alt="">个人中心</span></a>
                    </div>
                    <div class="fl line"></div>
                    <div class="tongzhi fl">
                        <a href="javascript:;" class='loginout'><span><img src="../images/icon_aqtc.png" alt="">安全退出</span></a>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="top-tips">
                    <span>xxx，您好！</span>
                    当前在线人数666人
                </div>
            </div>
        </div>
    </div>
</header>
<!--logo-->
<div class="logo">
    <div class="container">
        <div class="logoimg fl">
            <a href="../index.html"><img src="../images/icon_logo.png" alt=""></a>
        </div>
        <div class="logoright fr">
            <li class="on"><a href="../index.html">首页</a></li>
            <li><a href="javascript:;" class="addroom">创建房间</a></li>
            <li><a href="javascript:;"><img src="../images/icon_nav.png" alt=""></a></li>
            <div class="search-box fl">
                <input type="text" class="search" placeholder="请输入房间ID">
                <img src="../images/icon_search.png" alt="">
                <div class="result_box">

                </div>
            </div>
        </div>
    </div>
</div>
<!--个人中心-->
<div class="container menber">
    <div class="menber-left fl">
        <div class="menber-left-top">
            <div class="user-logo">
                <img src="../images/icon_mrtx.png" alt="" class="user-left-head">
                <p class="cen_username">用户名</p>
                <p class="user_id">ID:445566</p>
            </div>
            <div class="menber-left-cen">
                <li>
                    <p class="user_hot">1000</p>
                    <p>活跃度</p>
                </li>
                <li>
                    <p class="user_money">100</p>
                    <p>亿信币</p>
                </li>
                <div class="clearfix"></div>
            </div>
            <div class="menber-left-link">
                <li><a href="menber.html"><img src="../images/icon_wdzl.png" alt="">我的资料</a></li>
                <li><a href="wdgz.html"><img src="../images/icon_wdgz.png" alt="">我的关注</a></li>
                <li><a href="fans.html"><img src="../images/icon_wdfs.png" alt="">我的粉丝</a></li>
                <li class="on"><a href="wdzh.html"><img src="../images/icon_wdzh.png" alt="">我的账户</a></li>
                <li><a href="message.html"><img src="../images/icon_wdmsg.png" alt="">我的消息</a></li>
            </div>
        </div>
    </div>
    <div class="menber-right fl">
        <!-- 我的资料 -->
        <div class="user-info wdzh">
            <div class="user-title">账户明细</div>
        </div>
        <div class="wdzh-cen">
            <div class="wdzh-banner">
                <div class="wdzh-money">
                    <p class="user_money">1000</p>
                    <p>账户余额</p>
                </div>
                <div class="chongzhi-btn">
                    <a href="recharge.html">
                        <span class="rightdiv"><img src="../images/icon_go.png" alt=""></span>
                        <span class="leftdiv">充值</span>
                        <span class="clearfix"></span>
                    </a>
                </div>
            </div>
            <div class="wdzh-list">
                <div class="wdzh-list-tit">
                    <li>项目</li>
                    <li>金额</li>
                    <li>时间</li>
                </div>
                <div class="wdzh-list-cen">
                    <div class="wdzh-list-li">
                        <li>购买礼物</li>
                        <li>-15 <span><img src="../images/icon_yexs.png" alt=""></span></li>
                        <li>2018-8-23 14:49:24</li>
                    </div>
                </div>
                <div class="message-page">
                    <div class="pagebox" style="margin-right: 95px;">
                        <span class="blue"><a href="javascript:;" class="prev" data-prev="1">上一页</a></span>
                        <span class="blue"><a href="javascript:;" class="next" data-next="2">下一页</a></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="clearfix"></div>
</div>
<!--个人中心end-->
<!--footer-->
<footer>
    <div class="container">
        <div class="footer-list">
            <div class="footer-tit">
                联系我们
            </div>
            <ul>
                <li><a href="tencent://message/?uin=88888888&Site=&menu=yes">商务QQ:11111111</a></li>
                <li>技术咨询:11111111</li>
                <li>联系电话:11111111</li>
            </ul>
        </div>
        <div class="footer-list">
            <div class="footer-tit">
                常见问题
            </div>
            <ul>
                <li><a href="javascript:;">账号问题</a></li>
                <li><a href="javascript:;">常见问题</a></li>
                <li><a href="javascript:;">新手入门</a></li>
            </ul>
        </div>
        <div class="footer-list">
            <div class="footer-tit">
                关于我们
            </div>
            <ul>
                <li><a href="javascript:;">公司介绍</a></li>
                <li><a href="javascript:;">隐私政策</a></li>
                <li><a href="javascript:;">免责声明</a></li>
            </ul>
        </div>
        <div class="footer-list">
            <div class="footer-tit">
                友情链接
            </div>
            <ul>
                <li><a href="javascript:;">xxxx网</a></li>
                <li><a href="javascript:;">xxxx网</a></li>
                <li><a href="javascript:;">xxxx网</a></li>
            </ul>
        </div>
        <div class="footer-list">
            <img src="../images/icon_logo1.png" alt="">
        </div>
        <div class="clearfix"></div>
    </div>
</footer>
<div class="copyright">
    <div class="container">
        <div class="fr">川ICP备案号xxxxx号</div>
        <div class="cpr">Copyright ©聊天室网 2014-2018.All rights reseved</div>
    </div>
</div>

<script>
    // 获取账户明细
    $(window).ready(function(){
        function zhangdanlist(s){
            $.ajax({
                url:'http://120.79.73.159/api/personal/billing_details',
                data:{uid:$.cookie('user_id'),token:$.cookie('user_token'),page:s},
                type:'POST',
                datatype:'json',
                success:(function (moneys) {
                    var money = JSON.parse(moneys);
                    var num = money.data.back_data.length;
                    var s = money.data.back_data;
                    var list = '';
                    $('.wdzh-list-cen').empty();
                    for(num in s){
                        list+=
                            '<div class="wdzh-list-li">'+
                            '<li>'+ s[num].title +'</li>'+
                            '<li>'+s[num].money+'<span><img src="../images/icon_yexs.png" alt=""></span></li>'+
                            '<li>'+s[num].create_at+'</li>'+
                            '</div>';
                    };
                    $('.wdzh-list-cen').append(list);

                    var prev,next,nowpage,allpage;
                    nowpage = Number(money.data.now_page);
                    allpage = money.data.total_page;
                    prev = nowpage-1;
                    next = nowpage+1;
                    prev<1?prev=1:prev = nowpage-1;
                    next >= allpage ? next = allpage : next = nowpage+1;
                    var page =  '<span class="blue"><a href="javascript:;" class="prev pages" data-page="'+prev+'">上一页</a></span>\n' +
                        '<span class="blue">'+nowpage+'/'+allpage+'页</span>\n' +
                        '<span class="blue"><a href="javascript:;" class="next pages" data-page="'+next+'">下一页</a></span>\n';
                    $('.pagebox').empty();
                    $('.pagebox').append(page);
                })
            })
        }
        zhangdanlist();
        $(document).on('click','.pagebox a',function(){
            zhangdanlist($(this).data('page'));
        })

    })
</script>

<script src="../js/common.js"></script>
<script src="../js/menber.js"></script>
<script src="../js/distpicker.data.js"></script>
<script src="../js/distpicker.js"></script>
<script src="../js/main.js"></script>
</body>
</html>